<template>
    <div>
        <el-form ref="form" :model="obj.data" label-width="90px">
            <el-form-item label="课程名称" prop="name" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.name" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="课程类别" prop="type" :rules="[formRulesMixin.notNull]">
                <el-radio-group v-model="obj.data.type">
                    <el-radio v-for="x in globalData.trainTypeList" :key="x" :label="x.value">{{x.text}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="开课时间" prop="endtime" :rules="[formRulesMixin.notNull]">
                <DateRange v-model:start="obj.data.starttime" v-model:end="obj.data.endtime" sph="开课时间" />
            </el-form-item>
            <el-form-item label="课时数量" prop="classhour" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.classhour" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="课程封面">
                <UpFileS v-model:file="obj.data.cover" dir="train" />
            </el-form-item>
            <el-form-item label="视频" v-if="obj.data.type==0">
                <div class="v_item" v-for="(x,i) in obj.data.videojson" :key="x">
                    <el-input v-model="x.name" placeholder="视频名称" clearable autocomplete="off" class="w120"></el-input>
                    <div class="mb5"></div>
                    <UpFileS v-model:file="x.file" v-model:videotime="x.videotime" dir="train" :maxsize="524288000" :accept="['video/mp4','video/mpeg']"/>
                    <span class="clear" @click.prevent="del('video',i)">删除</span>
                </div>
                <div><span class="btn sub sub1" @click.prevent="add('video')">添加视频</span></div>
            </el-form-item>
            <el-form-item label="附件" v-if="obj.data.type==0">
                <div class="v_item" v-for="(x,i) in obj.data.filejson" :key="x">
                    <el-input v-model="x.name" placeholder="附件名称" clearable autocomplete="off" class="w120"></el-input>
                    <div class="mb5"></div>
                    <UpFileS v-model:file="x.file" dir="train" :maxsize="524288000" :accept="['application/pdf','application/msword','application/vnd.ms-excel']"/>
                    <span class="clear" @click.prevent="del('file',i)">删除</span>
                </div>
                <div><span class="btn sub sub1" @click.prevent="add('file')">添加附件</span></div>
            </el-form-item>
            <el-form-item label="课程内容" prop="msg" :rules="[formRulesMixin.notNull]">
                <Editer v-model:value="obj.data.msg" width="100%" height="60vh" :maxheight="100000" />
            </el-form-item>
            <el-form-item class="dialog-btns-item">
                <div class="dialog-btns">
                    <span class="btn clear" @click="$emit('close')" style="margin-top: 0px;">取消</span>
                    <span class="btn sub ml10" @click.prevent="upData">提交</span>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRaw,inject } from 'vue'
    import UpFileS from "@/components/upfile_single.vue"
    import Editer from "@/components/editer.vue"
    import DateRange from '@/components/date_range.vue'
    let { proxy } = getCurrentInstance()
    const props = defineProps({
        train_id: { type: String }
    })
    let obj = reactive({
        data:{
            train_id: props.train_id,
            name: "",
            msg: "",
            cover_old: "",
            cover:"",
            type:0,
            videos_old:"",
            videos:"",
            videojson:[],
            files:"",
            filejson:[],
            classhour:"",
            starttime:"",
            endtime:"",
        },
    })

    let add = (type) => {
        obj.data[`${type}json`].push(type==='video'?{name:"",file:"",videotime: 0}:{name:"",file:""})
    }
    let del = (type,t) => {
        obj.data[`${type}json`].splice(t,1)
    }
    let init = async () => {
        if(obj.data.train_id > 0){
            proxy.$ajax({
                url: 'train/get',
                data: {train_id:obj.data.train_id},
                bfLoading: true
            }).then(d => {
                if(d.success){
                    obj.data = {...obj.data, ...d.msg}
                    obj.data.type = parseInt(obj.data.type)
                    obj.data.cover_old = d.msg.cover
                    obj.data.videojson = typeof d.msg.videojson=='object'?d.msg.videojson:[]
                    obj.data.filejson = typeof d.msg.filejson=='object'?d.msg.filejson:[]
                    obj.data.videos = obj.data.videos_old = obj.data.videojson.map(t => t.file).join(",")
                    obj.data.files  = obj.data.filejson.map(t => t.file).join(",")
                    console.log(obj.data)
                }else{
                    proxy.elMessageMixin(d.err, 'error')
                }
            }).catch(() => { })
        }
    }
    init()
    let upData = () => {
        proxy.$refs['form'].validate(valid => {
            if (valid) {
                let videoArr = [];
                obj.data.videojson.map(t => {
                    if(t.file){
                        videoArr.push(t)
                    }
                })
                obj.data.videojson = videoArr
                obj.data.videos = videoArr.map(t => t.file).join(',')

                let fileArr = [];
                obj.data.filejson.map(t => {
                    if(t.file){
                        fileArr.push(t)
                    }
                })
                obj.data.filejson = fileArr
                obj.data.files = fileArr.map(t => t.file).join(',')
                console.log(obj.data)
                proxy.$ajax({
                    url: 'train/design',
                    data: obj.data,
                    bfLoading: true,
                    timeout:60000
                }).then(d => {
                    if(d.success){
                        proxy.elMessageMixin(`培训课程 ${obj.data.train_id>0?'修改':"添加"}成功`, 'success')
                        proxy.$emit('init')
                        proxy.$emit('close')
                    }else{
                        proxy.elMessageMixin(d.err, 'error')
                    }
                }).catch(() => { })
            }else{
                return false
            }
        })
    }
</script>

<style scoped>
    .btn.sub.sub1 { width: 100px; margin:0; }
    .v_item { width: 120px; margin-right: 15px; }
    .clear { width: 80px; height: 30px; box-sizing: border-box; margin-top: -15px; border: 1px solid #C0C4CC; border-radius: 6px; display: flex; justify-content: center; align-items: center; }
</style>